<template>
    <div>
        <div style="border: 1px solid #e7e7e7;display: flex;justify-content: space-between;height: 50px;align-items: center">
            <div style="margin-left: 10px">
                <el-icon class="el-icon-arrow-left" style="font-size: 16px"></el-icon>
                <span style="font-size: 14px;cursor:pointer;" @click="back">返回 /</span>
                <span style="font-size: 14px;color: #8c8c8c">创建客户待办</span>
            </div>
            <div style="height: 100%;width: 100px;background-color: #409EFF;cursor:pointer;display: flex;justify-content: center;align-items: center;color: white"
                 @click="submitHandle">
                保存
            </div>
        </div>

        <el-form ref="taskRulesForm" :model="taskRecord" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="clientTodoType" label="任务类型" :rules="[{required: true, message: '请选择任务类型', trigger: 'change'}]">
                <el-select v-model="taskRecord.clientTodoType" size="small" style="width: 200px">
                    <el-option
                            v-for="item in taskType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="taskTime" label="起止时间">
                <el-date-picker
                        size="small"
                        v-model="taskRecord.taskTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="任务内容">

            </el-form-item>

            <TypeContentText ref="typeContentText" :clientInfo="clientInfo" :contentList="taskRecord.contentList"/>
        </el-form>
    </div>
</template>

<script>
import TypeContentText from "@/components/type_content_text/type_content_text"

const taskType = [{
    value: '1',
    label: '发微信'
}, {
    value: '2',
    label: '打电话'
}, {
    value: '3',
    label: '拜访'
}, {
    value: '4',
    label: '其他'
}]
export default {
    name: "create_task",
    components: {
        TypeContentText
    },
    props: {
        clientInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            taskRecord: {
                clientTodoType: '',
                taskTime: ''
            },
            taskType: taskType,
        }
    },
    mounted() {
        this.resetFormHandle()
        this.$refs.typeContentText.initData()
    },
    methods: {
        back() {
            this.$emit("currentHandle", "default")
        },
        handleRemove(file) {
            this.$message.error("error")
        },
        addContent() {
            this.taskRecord.contentList.push({
                contentType: 1,
                content: '',
                imageUrl: '',
                linkContent: {
                    linkAddress: '',
                    linkTitle: '',
                    content: ''
                }
            })
        },
        deleteContent(index) {
            this.taskRecord.contentList.splice(index, 1)
        },
        resetFormHandle() {
            this.taskRecord = {
                clientTodoType: '',
                taskTime: ''
            }
        },
        submitHandle() {
            let that = this
            that.$refs.taskRulesForm.validate((valid) => {
                if (!valid) {
                    return false;
                }

                let clientTodoDescription = that.$refs.typeContentText.getData()
                that.taskRecord['clientId'] = that.clientInfo.clientId
                that.taskRecord['clientTodoDescription'] = JSON.stringify(clientTodoDescription)
                that.taskRecord['startTime'] = that.taskRecord['taskTime'][0]
                that.taskRecord['endTime'] = that.taskRecord['taskTime'][0]
                delete that.taskRecord['taskTime']
                that.$request("/api/clientTodo/insertClientTodo/1_0", that.taskRecord, "POST").then((data) => {
                    that.resetFormHandle()
                    that.$refs.typeContentText.initData()
                    that.$message({
                        message: '创建待办任务成功！',
                        type: 'success'
                    });
                    that.$emit('currentHandle', 'default');
                })
            });
        }
    }
}
</script>

<style scoped>

</style>
